<!-- 新增题库 -->
<template>
    <el-dialog :model-value="dialogVisible" :before-close="closeDialog" title="抽取试题" :fullscreen="true" align-center>
        <el-skeleton :rows="15" animated :loading="gujiaping">
            <div v-loading="loadingshow">
                <div class="grid-content">
                    <el-row>
                        <el-col :span="8">
                            <el-select style="width: 100%;" @change="Questions" multiple v-model="Ques"
                                placeholder="选择题库搜索">
                                <el-option v-for="item in Question" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="8" justify="center" align="center">
                            <el-input size="small" style="width: 50%;" @input="inpus" v-model="key" placeholder="请输入需要查询的试题"
                                class="input-with-select">
                                <template #append>
                                    <el-button icon="search" circle />
                                </template>
                            </el-input>
                        </el-col>
                        <el-col :span="8">
                            <el-select style="width: 100%;" @change="labels" multiple v-model="label" placeholder="选择题库搜索">
                                <el-option v-for="item in checkList" :key="item" :label="item" :value="item">
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                </div>
                <div class="trr" style="height: 67vh;" v-loading="loadingshow">
                    <el-table :data="tableData" height="60vh" border style="width: 100%" @selection-change="selectionAll"
                        row-key="id">
                        <el-table-column type="selection" width="55" :reserve-selection="true" />
                        <el-table-column type="index" width="60" label="序号" />
                        <el-table-column prop="content" label="题干" width="180" show-overflow-tooltip />
                        <el-table-column prop="lv" label="难度" />
                        <el-table-column label="标签">
                            <template #default="scope">
                                <el-tag :key="item.id" v-for="item in scope.row.labels.split(',')">
                                    {{ item }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="author" label="作者" />
                        <el-table-column prop="createTime" label="添加时间" width="150" />
                    </el-table>
                    <el-row style="padding-top: 20px;">
                        <el-col :span="2" align="left">
                            <el-button type="primary" @click="Imports" :disabled="selections.length < num">确认选择</el-button>
                        </el-col>
                        <el-col :span="17"><!-- 分页 -->
                            <div class="page2">
                                <el-pagination :current-page="currentPage" @size-change="handleSizeChange"
                                    @current-change="changes" :page-size="limit" :total="totle"
                                    :page-sizes="[10, 10 * 2, 10 * 3, 10 * 4]" small="small" background="background"
                                    layout="total, sizes, prev, pager, next, jumper">
                                </el-pagination>
                            </div>
                        </el-col>
                        <el-col :span="5">
                            <text>最少选择【{{ num }}】道试题,已选择【{{ selections.length }}】道试题</text>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </el-skeleton>
    </el-dialog>
</template>

<script lang="ts">
import { defineComponent, getCurrentInstance, onMounted, reactive, toRefs } from 'vue'
import { ElMessage, ElMessageBox, ElNotification, ElNotification as notify } from 'element-plus'
import { GetQuestionBanks, GetLabels, GetQuestions } from "../../api/question/question";
import router from '../../router';
import { useRoute } from 'vue-router';
export default defineComponent({
    props: ['dialogVisible', 'data'],
    emits: ["datas", 'close'],
    setup(props, context) {
        const route = useRoute();
        const { ctx } = getCurrentInstance() as any;
        //界面加载时发生
        onMounted(() => {
            event.GetLabel();
            event.GetQuestionBanks();
            event.GetQuestions();
        })
        const shujudata = reactive({
            gujiaping: true,
            loadingshow: false,
            Question: [],//获取题库标签
            checkList: [],//获取标签
            tableData: [],//获取题库列表
            page: 1,
            limit: 10,
            totle: 0,
            key: '',//搜索框值
            Ques: [],//题库选择数据
            label: [],//标签文本框值
            selections: [],//选择的试题
            currentPage: 1,
            Questiondata: [],
            num: 10,
        })
        const event = {
            // 确认选择试题
            Imports() {
                ElMessageBox.confirm('确认选择这【' + shujudata.selections.length + '】道题目吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    shujudata.Questiondata = []
                    shujudata.Questiondata = shujudata.selections
                    context.emit('datas', shujudata.Questiondata)
                    context.emit('close', false)
                }).catch(() => {
                    ElNotification({
                        title: '操作已取消',
                        type: 'info',
                    })
                });
            },
            //翻页
            changes(val: any) {
                shujudata.currentPage = val
                shujudata.loadingshow = true
                shujudata.page = val
                event.GetQuestions()
            },
            //每页条数
            handleSizeChange(val: any) {
                shujudata.loadingshow = true
                shujudata.limit = val
                event.GetQuestions()
            },
            // input搜索框改变时触发
            inpus() {
                shujudata.loadingshow = true
                event.GetQuestions()
            },
            //题库搜索框选择改变时触发
            Questions(val: any) {
                shujudata.Ques = val
                shujudata.loadingshow = true
                event.GetQuestions()
            },
            // 标签搜索框改变时触发
            labels(val: any) {
                shujudata.label = val
                shujudata.loadingshow = true
                event.GetQuestions()
            },
            // 多选
            selectionAll(selection: any) {
                shujudata.selections = selection
                console.log("选择的值", shujudata.selections)
            },

            //弹窗关闭的时候 传状态给父组件
            closeDialog() {
                context.emit('close', false)
            },
            // 获取标签
            GetLabel() {
                GetLabels({}).then((res: any) => {
                    if (res.result == 0) {
                        shujudata.checkList = res.data
                        shujudata.gujiaping = false
                        shujudata.loadingshow = false
                    }
                })
            },
            // 获取题库标签
            GetQuestionBanks() {
                GetQuestionBanks({
                    page: 1,
                    limit: 999,
                    key: '',
                    isPublish: 1
                }).then((res: any) => {
                    if (res.result == 0) {
                        shujudata.Question = res.data.data
                        shujudata.gujiaping = false
                        shujudata.loadingshow = false
                        console.log('获取题库标签', res)
                    }
                })
            },
            //获取试题列表
            GetQuestions() {
                //查询题目
                GetQuestions({
                    page: shujudata.page,
                    limit: shujudata.limit,
                    isPublish: 1,
                    isBan: 0,
                    key: shujudata.key,
                    banks: shujudata.Ques.join(","),
                    labels: shujudata.label.join(","),
                }).then((res: any) => {
                    if (res.result == 0) {
                        // var arr: any[] = [];
                        // props.data.forEach((item: any) => {
                        //     item.tableData.forEach((item2: any) => {
                        //         arr.push(item2)
                        //     });
                        // });

                        // console.log("dsafads法大师傅", arr)
                        // if (arr.length > 0) {
                        //     var uniqueArr: any[] = []
                        //     res.data.data.forEach((item: any) => {
                        //         if (!uniqueArr.some((i: any) => i.id === item.id)) {
                        //             uniqueArr.push(item);
                        //         }
                        //     });
                        //     console.log("dsafads法大师傅uniqueArr", uniqueArr)
                        // }
                        shujudata.tableData = res.data.data
                        shujudata.totle = res.data.total
                        shujudata.gujiaping = false
                        shujudata.loadingshow = false
                    }
                })
            },
        }
        return {
            ...toRefs(shujudata),
            ...event,
        }
    },
})
</script>



<style scoped>
.pageview {
    min-width: 720px;
    text-align: center;
    background-color: #fff;
    border-radius: 10px;
    padding: 10px;
}

.trr {
    margin: auto;
    margin-top: 2vh;
    border-radius: 5px;
    padding: 10px;
    width: 95%;
    background-color:cyan;
    border: 1px solid cyan;
}

.grid-content {
    margin: auto;
    border-radius: 5px;
    background-color:cyan;
    width: 95%;
    line-height: 45px;
    text-align: left;
    padding: 10px;
    border: 1px solid darkgray;
}

.page2 {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>

